<template>
  <div></div>
</template>

<script>
import Observer from '@/utils/observer.js'// vue 如何处理数组的响应（数据绑定）
export default {
  name: 'LearnVue', // 学习vue原理
  data () {
    return {

    }
  },
  methods: {
    test () {
      const a = {}
      let bValue = 1
      Object.defineProperty(a, 'b', {
        set (value) {
          bValue = value
          console.log('setted')
        },
        get () {
          return bValue
        }
      })
      console.log(a.b)
      a.b = []
      a.b = [1, 2, 3]
      a.b[0] = 10
      a.b.push(4)
      a.b.length = 6
      console.log(a.b)

      const data = {
        apg: [{ a: 'b' }, 2, 3]
      }
      const app = new Observer(data)
      app.data.apg[2] = 111
      console.log(app.data.apg)
      app.data.apg.push(5)
      console.log(app.data.apg[0].a)
      console.log(app.data.apg)
    }
  },
  mounted () {
    this.test()
  }
}
</script>

<style lang="scss" scoped>
</style>
